<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="eleTree扩展树示例">
    <meta name="keywords" content="eleTree示例,layui扩展,hsiangleev">
    <title>layui扩展树示例</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../eleTree/eleTree.css" media="all">
    <style>
        html,body{
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            padding: 15px 0px 30px 0px;
            scroll-behavior: smooth;
        }
        .nav{
            position: fixed;
            right: 25px;
            top: calc(50% - 90px);
            border: 1px solid #d2d2d2;
            background-color:#fff;
            z-index: 100000;
        }
        .nav-title{
            background-color: #F8F8F8; 
            padding:0 80px 0 20px;
            margin: 0px;
            height: 42px;
            line-height: 42px;
            border-bottom: 1px solid #eee;
        }
        .nav ul{
            padding:10px 0px 10px 35px;
        }
        .nav ul li{
            padding: 5px 0px;
            list-style-type: decimal;
        }
        .nav ul a{
            color: #333;
            font-size: 14px;
            text-decoration: none;
        }

        .eleTree{
            width: 350px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: inline-block;
        }
        .inp{
            width: 100%;
            line-height: 30px;
        }
        .slideTest{
            margin: 0 10px;
        }
        .met{
            display: none;
            width: 100%;
        }
        .ele4{
            height: 200px;
        }
        .blue{
            color: #01AAED;
        }
        a:hover{
            color: #01AAED;
        }
        .ele5{
            height: auto;
            width: 100%;
            display: none;
            position: absolute;
            top:100%;
            background-color: #fff;
            z-index: 100;
        }
    </style>
</head>
<body>
    <a href="https://github.com/hsiangleev/layuiExtend" style="float: right;"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
    <div class="nav">
        <h5 class="nav-title">目录</h5>
        <ul>
            <li><a href="#property">属性示例</a></li>
            <li><a href="#methodEx">方法示例</a></li>
            <li><a href="#eventEx">事件示例</a></li>
            <li><a href="#lazyLoad">懒加载示例</a></li>
            <li><a href="#dropdown">下拉树示例</a></li>
            <li><a href="#search">节点搜索</a></li>
        </ul>
    </div>
    <a href="../eleTree/index.html" class="blue" style="line-height: 60px;font-size: 30px;">文档链接</a>
    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend>
            <a name="property">属性示例</a>
        </legend>
    </fieldset>
    <div class="eleTree ele1" lay-filter="data1"></div>
    <div class="eleTree layui-form">
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="renderAfterExpand" lay-skin="primary" checked></div>
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="highlightCurrent" lay-skin="primary"> </div>
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="defaultExpandAll" lay-skin="primary"> </div>
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="expandOnClickNode" lay-skin="primary" checked> </div>
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="checkOnClickNode" lay-skin="primary"> </div>
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="autoExpandParent" lay-skin="primary"> </div>
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="showCheckbox" lay-skin="primary"> </div>
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="checkStrictly" lay-skin="primary"> </div>
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="accordion" lay-skin="primary"> </div>
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="draggable" lay-skin="primary"> </div>
        <div class="inp"><input type="checkbox" autocomplete="off" name="opera" lay-filter="test" title="showLine" lay-skin="primary"> </div>

        <div class="inp">
            <h3>contextmenuList</h3>
            <input type="checkbox" name="opera" autocomplete="off"  lay-filter="menuList" title="copy" lay-skin="primary">
            <input type="checkbox" name="opera" autocomplete="off"  lay-filter="menuList" title="add" lay-skin="primary">
            <input type="checkbox" name="opera" autocomplete="off"  lay-filter="menuList" title="edit" lay-skin="primary">
            <input type="checkbox" name="opera" autocomplete="off"  lay-filter="menuList" title="remove" lay-skin="primary">
            <input type="checkbox" name="opera" autocomplete="off"  lay-filter="menuList" title="test" lay-skin="primary">
        </div> 
        <!-- <div class="inp"><input type="checkbox" name="opera" lay-filter="test" title="defaultExpandedKeys" lay-skin="primary"></div>  -->
        <!-- <div class="inp"><input type="checkbox" name="opera" lay-filter="test" title="defaultCheckedKeys" lay-skin="primary"></div>  -->
        <div class="inp">
            <h3>indent</h3>
            <div class="slideTest"></div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend>
            <a name="methodEx">方法示例</a>
        </legend>
    </fieldset>
    <div class="eleTree ele2" lay-filter="data2"></div>
    <div class="eleTree layui-form">
        <select name="city" lay-filter="methods">
            <option value="">请选择一个方法</option>
            <option value="updateKeyChildren">更新子节点</option>
            <option value="updateKeySelf">更新当前节点</option>
            <option value="getChecked">获取选中的节点</option>
            <option value="setChecked">设置选中的节点</option>
            <option value="unCheckNodes">取消所有选中的节点</option>
            <option value="unCheckArrNodes">取消某个选中的节点</option>
            <option value="expandAll">展开所有</option>
            <option value="unExpandAll">合并所有</option>
            <option value="expandNode">展开某节点的所有子节点</option>
            <option value="unExpandNode">合并某节点的所有子节点</option>
            <option value="toggleExpandNode">切换某节点的所有子节点的展开合并状态</option>
            <option value="remove">删除节点</option>
            <option value="append">添加子节点</option>
            <option value="insertBefore">添加到节点之前</option>
            <option value="insertAfter">添加到节点之后</option>
            <option value="reload">重新加载树</option>
            <option value="getAllNodeData">获取所有节点数据</option>
        </select>  
        <div class="updateKeyChildren met">
<pre class="layui-code code ">
el2.updateKeyChildren(22,[
    {
        id: 23,
        label: "濉溪县1",
        disabled: true
    }
]);
</pre>
        </div>
        <div class="updateKeySelf met">
<pre class="layui-code code ">
el2.updateKeySelf(22,{
    label: "淮北市1",
    disabled: true
})
</pre>
        </div>
        <div class="getChecked met">
<pre class="layui-code code ">
console.log(el2.getChecked(true,false));
</pre>
        </div>
        <div class="setChecked met">
<pre class="layui-code code">
el2.setChecked([12],true)
</pre>
        </div>
        <div class="unCheckNodes met">
<pre class="layui-code code">
el2.unCheckNodes();
</pre>
        </div>
        <div class="unCheckArrNodes met">
<pre class="layui-code code">
el2.unCheckArrNodes(22,24);
</pre>
        </div>
        <div class="expandAll met">
<pre class="layui-code code">
el2.expandAll();
</pre>
        </div>
        <div class="unExpandAll met">
<pre class="layui-code code">
el2.unExpandAll();
</pre>
        </div>
        <div class="expandNode met">
<pre class="layui-code code">
el2.expandNode(10);
</pre>
        </div>
        <div class="unExpandNode met">
<pre class="layui-code code">
el2.unExpandNode(10);
</pre>
        </div>
        <div class="toggleExpandNode met">
<pre class="layui-code code">
el2.toggleExpandNode(10);
</pre>
        </div>
        <div class="remove met">
<pre class="layui-code code">
el2.remove(23);
el2.remove(24);
</pre>
        </div>
        <div class="append met">
<pre class="layui-code code">
el2.append(23,{
    id: 26,
    label: "烈山区",
    disabled: true
})
</pre>
        </div>
        <div class="insertBefore met">
<pre class="layui-code code">
el2.insertBefore(24,{
    id: 26,
    label: "烈山区",
    disabled: true
})
</pre>
        </div>
        <div class="insertAfter met">
<pre class="layui-code code">
el2.insertAfter(1,{
    id: 26,
    label: "烈山区",
    disabled: true
})
</pre>
        </div>
        <div class="reload met">
<pre class="layui-code code">
 el2=el2.reload({data: data});
</pre>
        </div>
        <div class="getAllNodeData met">
<pre class="layui-code code">
getAllNodeData: function() {
    console.log(el2.getAllNodeData())
}
</pre>
        </div>
        
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend>
            <a name="eventEx">事件示例</a>
        </legend>
    </fieldset>
    <div class="eleTree ele3" lay-filter="data3"></div>
    <div class="eleTree layui-form">
        <h3 style="line-height: 50px;text-align:center;color: #ff4200">请在触发动作时查看控制台数据</h3>
    </div>

    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend>
            <a name="lazyLoad">懒加载示例</a>
        </legend>
    </fieldset>
    <div class="eleTree ele4" lay-filter="data4"></div>
<pre class="layui-code lazy">
var el4=eleTree.render({
    elem: '.ele4',
    data: [
        {
            "id": 1,
            "label": "安徽省"
        },
        {
            "id": 11,
            "label": "江苏省"
        }
    ],
    showCheckbox: true,
    lazy: true,
    load: function(data,callback) {
        console.log(data);
        var newData;
        switch (data.id) {
            case 1:
                newData=[
                    {
                        "id": 2,
                        "label": "马鞍山市"
                    }
                ]
                break;
            case 2:
                newData=[
                    {
                        "id": 3,
                        "label": "和县",
                        "isLeaf": true
                    }
                ]
                break;
            case 11:
                newData=[
                    {
                        "id": 12,
                        "label": "苏州市",
                        "disabled": true,
                        "isLeaf": true
                    }
                ]
                break;
        
            default:
                break;
        }
        setTimeout(function() {
            callback(newData);
        },500);
        
    }
});
</pre>

    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend>
            <a name="dropdown">下拉选择</a>
        </legend>
    </fieldset>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" readonly autocomplete="off" class="layui-input">
                <div class="eleTree ele5" lay-filter="data5"></div>
            </div>
        </div>
    </div>
<pre class="layui-code lazy">
<!-- 对应的html -->
<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
            <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" readonly autocomplete="off" class="layui-input">
            <div class="eleTree ele5" lay-filter="data5"></div>
        </div>
    </div>
</div>
//---------------------------------------------------------
// 对应的js
var el5;
$("[name='title']").on("click",function (e) {
    e.stopPropagation();
    if(!el5){
        el5=eleTree.render({
            elem: '.ele5',
            data: data,
            defaultExpandAll: true,
            expandOnClickNode: false,
            highlightCurrent: true
        });
    }
    $(".ele5").toggle();
})
eleTree.on("nodeClick(data5)",function(d) {
    $("[name='title']").val(d.data.currentData.label)
    $(".ele5").hide();
}) 
$(document).on("click",function() {
    $(".ele5").hide();
})
</pre>




<fieldset class="layui-elem-field layui-field-title site-title">
    <legend>
        <a name="search">节点搜索</a>
    </legend>
</fieldset>
<input type="text" placeholder="请输入关键字进行搜索" autocomplete="off" class="layui-input eleTree-search">
<div class="eleTree ele6" lay-filter="data6"></div>
<pre class="layui-code lazy">
<!-- 对应的html -->
<input type="text" placeholder="请输入关键字进行搜索" autocomplete="off" class="layui-input eleTree-search">
<div class="eleTree ele6" lay-filter="data6"></div>
//---------------------------------------------------------
// 对应的js
$(".eleTree-search").on("change",function() {
    el6.search($(this).val());
})
var el6=eleTree.render({
    elem: '.ele6',
    data: data,
    showCheckbox: true,
    defaultExpandAll: true,
    defaultCheckedKeys: [23,24],
    searchNodeMethod: function(value,data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    }
});
</pre>

    <script src="../layui/layui.js"></script>
    <script>
        
        layui.config({
            base: "../layui/lay/mymodules/"
        }).use(['jquery','table','eleTree','code','form','slider'], function(){
            var $ = layui.jquery;
            var eleTree = layui.eleTree;
            var table = layui.table;
            var code = layui.code;
            var form = layui.form;
            var slider = layui.slider;

            var data=[
                {
                    "id": 1,
                    "label": "安徽省",
                    "children": [
                        {
                            "id": 2,
                            "label": "马鞍山市",
                            "disabled": true,
                            "children": [
                                {
                                    "id": 3,
                                    "label": "和县"
                                },
                                {
                                    "id": 4,
                                    "label": "花山区",
                                    "checked": true
                                }
                            ]
                        },
                        {
                            "id": 22,
                            "label": "淮北市",
                            "children": [
                                {
                                    "id": 23,
                                    "label": "濉溪县"
                                },
                                {
                                    "id": 24,
                                    "label": "相山区",
                                    "checked": true
                                }
                            ]
                        }
                    ]
                },
                {
                    "id": 5,
                    "label": "河南省",
                    "children": [
                        {
                            "id": 6,
                            "label": "郑州市"
                        }
                    ]
                },
                {
                    "id": 10,
                    "label": "江苏省",
                    "children": [
                        {
                            "id": 11,
                            "label": "苏州市"
                        },
                        {
                            "id": 12,
                            "label": "南京市",
                            "children": [
                                {
                                    "id": 13,
                                    "label": "姑苏区"
                                },
                                {
                                    "id": 14,
                                    "label": "相城区"
                                }
                            ]
                        }
                    ]
                }
            ];

            var obj={
                elem: '.ele1',
                data: data,
                // url: "../eleTree/tree.json",
                renderAfterExpand: true,
                expandOnClickNode: true,
                defaultCheckedKeys: [23]
            }

            var el1=eleTree.render(obj);

            form.on('checkbox(test)', function(data){
                var title=$(data.elem).attr("title");
                var isChecked=data.elem.checked;
                if(isChecked){
                    obj[title]=true;
                }else{
                    obj[title]=false;
                }
                el1.reload(obj)
            });  
            var arr=[];
            form.on('checkbox(menuList)', function(data){
                var title=$(data.elem).attr("title");
                var isChecked=data.elem.checked;
                if(isChecked){
                    arr.push(title);
                }else{
                    arr.splice(arr.indexOf(title),1);
                }
                obj["contextmenuList"]=arr;
                el1.reload(obj);
            }); 
            slider.render({
                elem: '.slideTest',
                min: 10,
                max: 30,
                showstep: true,
                value: 16,
                change: function(value){
                    obj["indent"]=value;
                    el1.reload(obj);
                }
            });


            var el2=eleTree.render({
                elem: '.ele2',
                data: data,
                // url: "../eleTree/tree.json",
                showCheckbox: true,
                defaultExpandAll: true,
                defaultCheckedKeys: [23,24],
                done: function() {
                    // el2.remove(24);
                }
            });
            form.on('select(methods)', function(data){
                methods[data.value]();
                $("."+data.value).css("display","inline-block").siblings(".met").hide();
            }); 
            layui.code({elem: ".code",about: true,title: "对应的代码",encode: true});
            layui.code({elem: ".lazy",about: true,title: "对应的代码",encode: true});

            var methods={
                updateKeyChildren: function() {
                    el2.updateKeyChildren(22,[
                        {
                            id: 23,
                            label: "濉溪县1",
                            disabled: true
                        }
                    ]);
                },
                updateKeySelf: function() {
                    el2.updateKeySelf(22,{
                        label: "淮北市1",
                        disabled: true
                    })
                },
                getChecked: function() {
                    console.log(el2.getChecked(true,false));
                },
                setChecked: function() {
                    el2.setChecked([12],true);
                },
                unCheckNodes: function() {
                    el2.unCheckNodes();
                },
                unCheckArrNodes: function() {
                    el2.unCheckArrNodes([22,24]);
                },
                expandAll: function() {
                    el2.expandAll();
                },
                unExpandAll: function() {
                    el2.unExpandAll();
                },
                expandNode: function() {
                    el2.expandNode(10);
                },
                unExpandNode: function() {
                    el2.unExpandNode(10);
                },
                toggleExpandNode: function() {
                    el2.toggleExpandNode(10);
                },
                remove: function() {
                    el2.remove(23);
                    el2.remove(24);
                },
                append: function() {
                    el2.append(23,{
                        id: 26,
                        label: "烈山区",
                        disabled: true
                    })
                },
                insertBefore: function() {
                    el2.insertBefore(24,{
                        id: 26,
                        label: "烈山区",
                        disabled: true
                    })
                },
                insertAfter: function() {
                    el2.insertAfter(1,{
                        id: 26,
                        label: "烈山区",
                        disabled: true
                    })
                },
                reload: function() {
                    el2=el2.reload({data: data});
                },
                getAllNodeData: function() {
                    console.log(el2.getAllNodeData())
                }
            }
            

            var el3=eleTree.render({
                elem: '.ele3',
                data: data,
                // url: "../eleTree/tree.json",
                showCheckbox: true,
                defaultExpandAll: true,
                draggable: true,
                showLine: true,
                contextmenuList: ["copy","add.async","edit","remove",{eventName: "test", text: "测试"}]
            });
            eleTree.on("nodeClick(data3)",function(d) {
                console.group("节点点击nodeClick:")
                console.log(d.data);    // 点击节点对于的数据
                console.log(d.event);   // event对象
                console.log(d.node);    // 点击的dom节点
                console.log(this);      // 与d.node相同
                console.groupEnd();      

            }) 
            eleTree.on("nodeChecked(data3)",function(d) {
                console.group("节点选中nodeChecked:")
                console.log(d.data);    // 点击节点对于的数据
                console.log(d.isChecked);   // input是否被选中
                console.log(d.node);    // 点击的dom节点
                console.log(this);      // input对于的dom
                console.groupEnd();      
            })
            eleTree.on("nodeContextmenu(data3)",function(d) {
                console.group("节点右键nodeContextmenu:")
                console.log(d.data);    // 点击节点对于的数据
                console.log(d.event);   // event对象
                console.log(d.node);    // 点击的dom节点
                console.log(this);      // 与d.node相同
                console.groupEnd();      
            })
            eleTree.on("nodeDrag(data3)",function(d) {
                console.group("节点拖拽nodeDrag:")
                // d.stop();           // 取消拖拽
                console.log(d.current);    // 起始节点对应的dom和数据
                console.log(d.target);   // 鼠标落点对应的dom和数据
                console.log(this);      // 鼠标落点对应的dom
                console.groupEnd();      
            })

            eleTree.on("nodeAppend(data3)",function(d) {
                // 异步操作
                setTimeout(function() {
                    console.group("添加子节点nodeAppend:")
                    console.log(d.data);    // 点击节点对于的数据
                    console.log(d.node);    // 点击的dom节点
                    console.log(this);      // 与d.node相同
                    // d.stop();            // 取消添加
                    // d.setData({          // 自定义数据
                    //     id: 666,
                    //     label: "aaa"
                    // })
                    d.setData();    // 异步必须调用
                    // d.stop();
                    console.log(d.newData); // 新增加的节点数据
                    console.groupEnd();  
                },300)    
            })
            eleTree.on("nodeInsertBefore(data3)",function(d) {
                // 异步操作
                setTimeout(function() {
                    console.group("添加节点之前nodeInsertBefore:")
                    console.log(d.data);    // 点击节点对于的数据
                    console.log(d.node);    // 点击的dom节点
                    console.log(this);      // 与d.node相同
                    // d.stop();            // 取消添加
                    // d.setData({          // 自定义数据
                    //     id: 666,
                    //     label: "aaa"
                    // })
                    d.setData()
                    console.log(d.newData); // 新增加的节点数据
                    console.groupEnd();    
                },300)  
            })
            eleTree.on("nodeInsertAfter(data3)",function(d) {
                // 异步操作
                setTimeout(function() {
                    console.group("添加节点之后nodeInsertAfter:")
                    console.log(d.data);    // 点击节点对于的数据
                    console.log(d.node);    // 点击的dom节点
                    console.log(this);      // 与d.node相同
                    // d.stop();            // 取消添加
                    // d.setData({          // 自定义数据
                    //     id: 666,
                    //     label: "aaa"
                    // })
                    d.setData()
                    console.log(d.newData); // 新增加的节点数据
                    console.groupEnd();   
                },300)   
            })
            eleTree.on("nodeEdit(data3)",function(d) {
                console.group("编辑节点nodeEdit:")
                console.log(d.data);        // 点击节点对于的数据
                console.log(d.node);        // 点击的dom节点
                console.log(d.value);       // 新输入的值
                console.log(this);          // 与d.node相同
                // d.stop();                // 取消编辑
                console.groupEnd();   
                // 异步修改节点
                // setTimeout(function() {
                //     d.async()
                // },300)
            })
            eleTree.on("nodeRemove(data3)",function(d) {
                console.group("删除nodeRemove:")
                console.log(d.data);        // 点击节点对于的数据
                console.log(d.node);        // 点击的dom节点
                // d.stop();                // 取消删除
                console.groupEnd();   
                // 异步删除节点
                // setTimeout(function() {
                //     d.async()
                // },300)   
            })
            // 自定义右键菜单回调
            eleTree.on("nodeTest(data3)",function(d) {
                console.group("自定义右键菜单回调nodeTest:")
                console.log(d.data);    // 点击节点对于的数据
                console.log(d.node);    // 点击的dom节点
                console.log(this);      // 与d.node相同
                console.groupEnd();      
            }) 
            
            var el4=eleTree.render({
                elem: '.ele4',
                data: [
                    {
                        "id": 1,
                        "label": "安徽省"
                    },
                    {
                        "id": 11,
                        "label": "江苏省"
                    }
                ],
                showCheckbox: true,
                lazy: true,
                load: function(data,callback) {
                    console.log(data);
                    var newData;
                    switch (data.id) {
                        case 1:
                            newData=[
                                {
                                    "id": 2,
                                    "label": "马鞍山市"
                                },
                                {
                                    "id": 5,
                                    "label": "淮北市"
                                }
                            ]
                            break;
                        case 2:
                            newData=[
                                {
                                    "id": 3,
                                    "label": "和县",
                                    "isLeaf": true
                                }
                            ]
                            break;
                        case 11:
                            newData=[
                                {
                                    "id": 12,
                                    "label": "苏州市",
                                    "disabled": true,
                                    "isLeaf": true
                                }
                            ]
                            break;
                    
                        default:
                            break;
                    }
                    setTimeout(function() {
                        callback(newData);
                    },500);
                    
                }
            });

            var el5;
            $("[name='title']").on("click",function (e) {
                e.stopPropagation();
                if(!el5){
                    el5=eleTree.render({
                        elem: '.ele5',
                        data: data,
                        // url: "../eleTree/tree.json",
                        defaultExpandAll: true,
                        expandOnClickNode: false,
                        highlightCurrent: true
                    });
                }
                $(".ele5").toggle();
            })
            eleTree.on("nodeClick(data5)",function(d) {
                $("[name='title']").val(d.data.currentData.label)
                $(".ele5").hide();
            }) 
            $(document).on("click",function() {
                $(".ele5").hide();
            })
            

            $(".eleTree-search").on("change",function() {
                el6.search($(this).val());
            })
            var el6=eleTree.render({
                elem: '.ele6',
                data: data,
                // url: "../eleTree/tree.json",
                showCheckbox: true,
                defaultExpandAll: true,
                defaultCheckedKeys: [23,24],
                searchNodeMethod: function(value,data) {
                    if (!value) return true;
                    return data.label.indexOf(value) !== -1;
                }
            });

        });
    </script>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?9e39de91fc206c680fb0266ab977e776";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</body>
</html>